<template>
	<view class='editAdd' >
		
		<view class='content' style="padding-bottom: 100px;">
			<view class='part'>
				<view class='partTit'>{{$t('orderDetail.total_amount')}}</view>
				<view class='partContent' >
					<view class='partLine'>
						<view class='lineTit' style="font-size: 16px;">{{amount}} SAR</view>

					</view>
				</view>
			</view>
			
			<!-- 支付方式列表 -->
			<radio-group @change="handleChange">
			    <view 
					v-for="item in paymentMethods" 
					:key="item.value" 
					class="pay-item"
			    >
				<view class="left">
				  <image :src="item.icon" class="icon"></image>
				  <text class="name" style="margin-left: 10px;">{{ item.name }}</text>
				</view>
				<radio :value="item.value" :checked="currentMethod === item.value" color="#FF5A5F" />
			  </view>
			</radio-group>
			
		</view>
		<view class='btns'>
			<view class='saveBtn' style="color:#000" @click='confirmPayment'>{{$t('pay.dopay')}}</view>
		</view>
	</view>
</template>

<script>
	import sidebar from '@/components/sidebar.vue'
	export default {
		components: {
			sidebar
		},
		data() {
			return {
				currentMethod: '1', // 当前选中的支付方式
				paymentMethods: [
					{
					  name: this.$t('pay.xianshang'),
					  value: '1',
					  icon: '/static/images/xianshang.png'
					},
					{
					  name: this.$t('pay.huodao'),
					  value: '2',
					  icon: '/static/images/huodaofukuan.png'
					}
				],
				mapHeight: '',
				id: '',
				amount: ''
			};
		},
		onLoad(e) {
			this.id = e.id ?? ''
			this.amount = e.amount ?? ''
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pay.pay'),
			})
		},
		methods: {
			// 选择支付方式
			handleChange(e) {
			  this.currentMethod = e.detail.value;
			},
			
			// 确认支付
			async confirmPayment() {
				const result =await this.$api('/Pay/pay', {'id':this.id});
				console.log(result);
				if(this.currentMethod==1){
					if(result.url){
						// #ifdef H5
						window.open(result.url, "_blank");
						// #endif
						// #ifdef APP
						plus.runtime.openURL(result.url); 
						// #endif
					}
				}
				if(this.currentMethod==1){
					uni.redirectTo({
					  url: '/pages/orders'
					});
				}
			},
			
		}
	}
</script>

<style lang="scss">
	
	.pay-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30rpx;
	  margin-bottom: 20rpx;
	  background: #fff;
	  border-radius: 16rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	}
	
	.left {
	  display: flex;
	  align-items: center;
	}
	
	.icon {
	  width: 50rpx;
	  height: 50rpx;
	  margin-right: 20rpx;
	}
	
	.name {
	  font-size: 32rpx;
	  color: #333;
	}
	.btns {
		.saveBtn {
			width: 100%;
			background: $main;
			color: white;
			text-align: center;
			border-radius: 4px;
			padding: 10px 0;
		}

		width: 100%;
		padding: 12px;
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing:border-box;
	}

	.content {
		.tag {
			.u-page__tag-item {
				width: 50px;
				display: inline-block;
				margin-right: 12px;
			}

			width: 100%;
			padding: 12px;
			box-sizing: border-box;
		}

		.line {
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			border-radius: 4px;
		}

		.part {
			.partContent {
				.partLine {
					.lineTit {
						font-size: 12px;
						color: #999999;
						padding: 8px 0;
					}

					width: 100%;
					padding: 5px 0 10px;
					border-bottom:1px solid rgba(0, 0, 0, 0.1)
				}

				.partLine:last-child {
					border: none;
				}

				width: 100%;
			}

			.partTit {
				width: 100%;
				font-size: 15px;
				font-weight: bold;
			}

			width: 100%;
			padding: 12px 12px 0;
			box-sizing: border-box;
			background: white;
			border-radius: 4px;
			margin-bottom: 12px;
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	::v-deep.u-switch {
		transform: scale(0.8) !important;
	}
</style>